import AvatarTitle from "@/components/AvatarTitle";
import { GetLatestCommentAPI } from "@/type/wwwAPI";
import { Col, ListGroupItem, Row } from "reactstrap";
import { getDatetime } from "taehui-ts/date";
import { useTo } from "taehui-ts/fe-utilities";

export default function CommentTitleView({
  forumID,
  essayID,
  comment: { avatarID, avatarName, date, text },
}: {
  forumID?: string;
  essayID?: number;
  comment: GetLatestCommentAPI[number];
}) {
  const to = useTo();

  const isLoading = !!(forumID && essayID);

  return (
    <ListGroupItem
      key={essayID}
      className={isLoading ? "route" : ""}
      onClick={
        isLoading
          ? () => {
              to(`/forum/${forumID}/${essayID}`);
            }
          : undefined
      }
    >
      <Row className="g-0">
        <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
          <span className="title">{text}</span>
        </AvatarTitle>
        <Col className="m-1" xs="auto">
          <span>{getDatetime(date)}</span>
        </Col>
      </Row>
    </ListGroupItem>
  );
}